<template>
  <div>
    <!-- 头部 -->
    <a-button style="margin-bottom: 20px" type="primary" @click="add('')" class="d-a-center">新增</a-button>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="renderData" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540,x:'auto' }" -->
      <template #jobName="{ record }">
        <span>{{ record.organServices.map(item => item.serviceName).join(',') }}</span>
      </template>

      <template #operation="{ record }">
        <a-button type="link" @click="add(record)">编辑</a-button>
        <a-button type="link" @click="handleJump(record.id, listPage)" v-has="{ a: $route, b: 2 }">服务配置</a-button>
        <a-button type="link" @click="getUrl(record.id)">复制链接</a-button>
        <a-button type="link" @click="qrcode(record.id)">生成二维码</a-button>
        <a-button type="link" danger @click="del(record.id)">删除</a-button>
      </template>
    </a-table>

    <!-- 新增编辑角色 -->
    <addModal v-model:visible="visible" :id="id" :selectData="selectData" @closeModal="closeModal" />
  </div>
</template>
<script>
import { reactive, ref, watch, computed, createVNode, toRefs, onMounted, defineOptions, onActivated } from 'vue'
import { Modal, notification, message } from 'ant-design-vue'
import { columnsArr, dataObj } from './data'
import addModal from './components/addModal.vue'
import router from '@/router/index.js'
import { selectPlaceOrganList, getQRCodeByOrganId, deleteOrganById, getAppletUrl } from '@/api/content/translate'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useTable, useModal, useCopy } from '@/hooks'

export default {
  components: {
    addModal
  },
  name: 'ContentTranslateList',

  setup() {
    // 状态列表
    defineOptions({
      name: 'ContentTranslateList'
    })
    const columns = columnsArr

    const data = reactive(dataObj)
    // 选择时间
    const panelChange = (date, dateString) => {
      formModel.value.startTime = dateString[0]
      formModel.value.endTime = dateString[1]
    }

    //必须有括号 建议箭头函数 防止深拷贝
    const getParams = () => ({})

    const { renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
      api: selectPlaceOrganList,
      getParams
    })
    handleSearch(1)

    //  删除
    const del = id => {
      const { closeModal } = useModal.confirm({
        title: '确定删除当前渠道吗?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: async () => {
          let res = await deleteOrganById({ id })
          closeModal()
        }
      })
    }
    // 查看
    const add = e => {
      data.selectData = e
      data.visible = true
    }

    const closeModal = () => {
      // data.id = ""
      // data.visible = false
      handleSearch()
    }
    onActivated(() => {
      handleSearch()
    })
    const handleJump = (id, listPage) => {
      router.push({
        path: '/content/translate/options',
        query: {
          id: id
        }
      })
    }
    const getUrl = id => {
      getAppletUrl({ organId: id }).then(res => {
        console.log(res.object)
        useCopy(res.object)
      })
    }
    const qrcode = id => {
      getQRCodeByOrganId({ organId: id }).then(res => {
        let link = document.createElement('a')
        link.download = ''
        link.href = res.object
        link.click()
        link.remove()
      })
    }
    return {
      ...toRefs(data),
      columns,
      renderData,
      formModel,
      loading,
      pagination,
      handleSearch,
      handleTableChange,
      handleJump,
      add,
      qrcode,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      closeModal,
      del,
      useCopy,
      getUrl
    }
  }
}
</script>

<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
